<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>创建表格练习</title>
    <style type="text/css">
        body{padding-left:15px;font-size:20px;}
        table{ border:1px solid #0099FF; width:70%; border-collapse:collapse; }
        table td{ border:#0099FF 1px solid; padding:10px 20px 3px 1px; }
        input[type='text']{width:150px;height:20px;vertical-align:text-bottom;text-indent:5px;font-size:20px;}
        input[type='button']{font-size:20px;}
    </style>
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        /** 练习1：创建单行单列的表格 */
        function createTable(){
            //创建表格
            var $table=$("<table></table>");
            var $tr=$("<tr></tr>");
            var $td=$("<td>Hello,我是td</td>");
            $tr.append($td);
            $table.append($tr);
            $("body").append($table);
            $("body").append("<hr/>");
        }
        /** 练习2：创建5行6列的表格 */
        function createTable2(){
            var $table=$("<table></table>");
            for(var r=0;r<5;r++){
                var $tr=$("<tr></tr>");
                for(var c=0;c<6;c++){
                    var $td=$("<td>hello,我是td</td>");
                    $tr.append($td);
                }
                $table.append($tr);
            }
            $("body").append($table);
            $("body").append("<hr/>");
        }

        /** 练习3：创建指定行和列的表格 */
        function createTable3(){
            var rows=$("#rows").val();
            var cols=$("#cols").val();
            var $table=$("<table></table>");
            for(var r=0;r<rows;r++){
                var $tr=$("<tr></tr>");
                for(var c=0;c<cols;c++){
                    var $td=$("<td>hello,我是td</td>");
                    $tr.append($td);
                }
                $table.append($tr);
            }
            $("body").append($table);
            $("body").append("<hr/>");
        }
    </script>
</head>
<body>
<!-- 练习1：点击下列按钮创建单行单列表格 -->
<input type="button" name="" id="" value="创建单行单列表格" onclick="createTable1();"/><br>
<!-- 练习2：点击下列按钮创建5行6列表格 -->
<input type="button" name="" id="" value="创建5行6列表格" onclick="createTable2();"/><br>
<!-- 练习3：点击下列按钮创建指定行、指定列的表格 -->
<input type="button" name="" id="" value="创建表格输入行数列数" onclick="createTable3();"/><br>
行数:<input type="text" name="" id="rows" value="" /><br/>
列数:<input type="text" name="" id="cols" value="" /><br/>
<!-- 将创建的表格添加到body内部(追加到最后) --><hr/>
</body>
</html>

